import type { ECharts } from 'echarts'

export interface SetOptionData {
  xAxisData: string[]
  faultData: number[]
  rateData: number[]
  yAxisLeftMax: number
  yAxisRightMax: number
  yAxisRightMin: number
}

export const setChartOptions = (chart: ECharts, { xAxisData, yAxisLeftMax, yAxisRightMax, yAxisRightMin, faultData, rateData }: SetOptionData) => {
  yAxisLeftMax = yAxisLeftMax < 100 ? 100 : yAxisLeftMax
  yAxisRightMax = yAxisRightMax < 100 ? 100 : yAxisRightMax

  // 向上取整十
  yAxisLeftMax = Math.ceil(yAxisLeftMax / 10) * 10
  yAxisRightMax = Math.ceil(yAxisRightMax / 10) * 10
  yAxisRightMin = Math.floor(yAxisRightMin / 10) * 10

  yAxisRightMin = yAxisRightMin > 0 ? 0 : yAxisRightMin

  const rightInterval = (yAxisRightMax - yAxisRightMin) / 5
  const leftInterval = yAxisLeftMax / 5

  chart.setOption({
    grid: {
      top: '40px',
      left: '50px',
      bottom: '50px',
      right: '100px'
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['故障数', '占比'],
      right: 10,
      top: 0
    },
    xAxis: {
      data: xAxisData,
      // axisLabel: {
      //   fontSize: 9
      // }
      axisLabel: {
        interval: 0,
        rotate: -15
      }
    },
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: yAxisLeftMax,
        splitNumber: 5,
        interval: leftInterval
      },
      {
        type: 'value',
        min: yAxisRightMin,
        max: yAxisRightMax,
        splitNumber: 5,
        interval: rightInterval,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '故障数',
        type: 'bar',
        data: faultData,
        barWidth: 40,
        label: {
          show: true,
          position: 'top'
        }
      },
      {
        name: '占比',
        data: rateData, // 占比
        type: 'line',
        yAxisIndex: 1
      }
    ]
  })
}

export interface TrendOption {
  chart: ECharts | null
  xAxisData: string[]
  yMax: number
  yMin: number
  series: any[]
  legendData: string[]
}

export const setChartOptionsByTrend = ({ chart, xAxisData, yMax, yMin, legendData, series }: TrendOption) => {
  chart!.setOption(
    {
      grid: {
        top: '40px',
        left: '50px',
        bottom: '30px',
        right: '80px'
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: legendData,
        right: 10,
        top: 0
      },
      xAxis: {
        data: xAxisData
      },
      yAxis: [
        {
          type: 'value',
          max: yMax,
          min: yMin,
          minInterval: 1, // 设置最小刻度间隔
          axisLabel: {
            formatter(v: number) {
              return `${v}%`
            }
          }
        }
      ],
      series: series
    },
    true
  )
}
